<template>
  <div class="idle">
    <!-- 上边的部分 -->
    <div class="release">
        <p class="p-left">
          <button
            class="btn"
            @click="cancelHandle"
          >
            取消
          </button>
        </p>
        <p class="p-right">
          <Button plain color="#333333" round type="primary" size="normal">存草稿</Button>
          <Button  round type="warning"  @click="publish" class="postBtn">发布</Button>
        </p>
    </div>
    <!-- 下边的部分 -->
    <div class="conent">
      <input class="txt" type="text" placeholder="请输入商品名称" v-model="name" />
    <field
  v-model="result"
  is-link
  readonly
  label="商品类型"
  name="picker"
  placeholder="点击选择商品类型"
  @click="showPicker = true"
/>
<popup v-model:show="showPicker" position="bottom">
  <picker
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</popup>
      <textarea
        v-model="content"
        style="margin-top:1rem"
        name=""
        id=""
        cols="40"
        rows="10"
        placeholder="买家都关心品牌型号、入手渠道、转手原因..."
      >
      </textarea>
      <uploader v-model="fileList" :after-read="afterRead">
        <template #preview-cover="{ file }">
          <div class="preview-cover van-ellipsis">{{ file.name }}</div>
        </template>
      </uploader>
      <cell  icon="location-o" is-link value="绿城银水" class="location"/>
      <config-provider :theme-vars="themeVars">
      <cell title="价格" icon="https://s1.328888.xyz/2022/10/11/gnJAk.png" is-link :value="'￥'+price" @click="showPopup"/>
      <popup v-model:show="show" position="bottom" closeable close-icon="success" :style="{ height: '20%' }">
        <field v-model="price" type="number" label="价格" />
      </popup>
    </config-provider>
      <cell title="同步宝贝到圈子" icon="https://s1.328888.xyz/2022/10/11/gANwd.png" is-link value="更多人看到更快卖出"/>
    </div>
  </div>
</template>
<style scoped>
.release {
  width: 90%;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
}
.p-left {
  font-size: 22px;
}
.p-right {
  width: 42vw;
  display: flex;
  justify-content: space-between;
}
.btn {
  border: none;
  background-color: #fff;
}
.conent {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #cecece;
}
.conent textarea {
  border: none;
}
/* 自定义预览样式 */
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
/* 位置 */
.location{
  width: 36vw;
}
/* 发布按钮 */
.postBtn{
  color: #333;
  background-color: #ffe293;
  border: none;
  width: 4.5rem;
}
</style>
<script setup>
import { Uploader,Button,Cell ,Icon,ConfigProvider,Toast} from "vant";
import { Form, Field, CellGroup ,Picker,Popup} from 'vant';
import { ref } from "vue";
import axios from "../utils/request";
import { useRouter } from "vue-router";
import {stringify} from "qs";
import { publishIdleAPI,deleteIdleAPI,modifyProductInfo } from "../services/shop";
import {
  loadProductCategoriesAPI,
  loadProductsAPI2
} from "../services/product";
    const router = useRouter();
    const categories = ref([]);//商品类型信息
    const name = ref(""); //商品名称
    const price = ref("0.00");//商品价格
    const content = ref(""); //商品描述
    const columns=[];//商品类型信息
    const result = ref('');//结果
    var goodsTypeId='';//商品类型id
    const imgUrl = ref("");//发送的图片信息
    const fileList = ref([]);
    const themeVars = {
          sidebarSelectedBorderColor:'#FFC731',
          gridItemIconSize:'4rem',
          cellValueColor:'red'
        };
   
    const showPicker = ref(false);
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const onConfirm = (value) => {
      result.value = value;
      showPicker.value = false;
    };
//获取商品类型数据
loadProductCategoriesAPI().then((res) => {
 
  categories.value = res.data;
  // console.log( categories.value.length);
  for(let i=0;i<categories.value.length;i++){
    columns.push(categories.value[i].name);
  }
  // console.log(columns);
});
const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      // console.log(file.file);
      const formData = new FormData();
      formData.append("file", file.file);
      axios.post("/api/goods/upload/avatar", formData).then((res) => {
        console.log(res);
    imgUrl.value = res.data;
    console.log(res.data);
    
  });
      // console.log(fileList.value[0].file);
    };
// 发布闲置
const publish = () => {
  console.log(result.value);

  switch (result.value) 
{ 
  case '汽车':goodsTypeId="1"; 
  break; 
  case '电器':goodsTypeId="2"; 
  break; 
  case '衣服':goodsTypeId="3"; 
  break; 
  case '书':goodsTypeId="4"; 
  break; 
  case '电子外设':goodsTypeId="5"; 
  break; 
  case '玩具':goodsTypeId="6"; 
  break; 
  case '房子':goodsTypeId="7"; 
  break; 
  case '拍卖':goodsTypeId="8"; 
  break; 
  case '精品':goodsTypeId="9"; 
  break; 
}
console.log(goodsTypeId);
  publishIdleAPI({
    name:name.value,
    goodsTypeId:goodsTypeId,
    goodsDescribe:content.value,
    goodsPrice:price.value,
    imgs:imgUrl.value
  }).then((res)=>{
    // console.log(res);
    if(res.code==200){
    Toast.success(res.msg);
    router.go(0);
  }else{
    Toast.fail('添加失败');
  }
    name.value='';
    price.value='0.00';
    content.value='';
    result.value='';
  })
}
// deleteIdleAPI('').then((res)=>console.log(res));
// fabuAPI().then((res) => (fabuAPI.value = res.data));
// const publish = () => {
//   if (content.value && name.value) {
//     fabuAPI({
//       name: name.value,
//       content: content.value,
//     }).then((res) => {
//       console.log(res);
//       //此处需要跳回会玩页
     
//     });
//   } else {
//     alert("请输入内容");
//   }
// };
const cancelHandle = () => {
  router.go(-1); // -1表示返回上一个
};
</script>